import { defineComponent, reactive, ref, toRefs } from 'vue'
import { NInput, NForm, NFormItem, NModal, FormRules } from 'naive-ui'
import { modPwdReq } from '@/service/modules/user'
import { Response } from '@/service/modules/common/types'

const ModPwdModal = defineComponent({
  name: 'ModPwdModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  emits: ['modalShowChange'],
  setup() {
    const state = reactive({
      // modPwdFormRef: ref(),
      modPwdForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      positiveButtonDisabled: false,
      rules: {
        oldPassword: {
          trigger: ['input', 'blur'],
          validator() {
            if (state.modPwdForm.oldPassword === '') {
              return new Error(window.$t('user.oldPasswordTips'))
            }
          }
        },
        newPassword: {
          trigger: ['input', 'blur'],
          validator() {
            if (state.modPwdForm.newPassword === '') {
              return new Error(window.$t('user.newPasswordTips'))
            }
          }
        },
        confirmPassword: {
          trigger: ['input', 'blur'],
          validator() {
            if (state.modPwdForm.confirmPassword === '') {
              return new Error(window.$t('user.confirmPasswordTips'))
            }
            if (
              state.modPwdForm.confirmPassword !== state.modPwdForm.newPassword
            ) {
              return new Error(window.$t('user.confirmPasswordErrTips'))
            }
          }
        }
      } as FormRules
    })
    return { ...toRefs(state) }
  },
  methods: {
    async onPositiveClick() {
      //输入框存在为空或者新密码不等于确认密码时则确认按钮无效
      if (
        this.modPwdForm.newPassword === '' ||
        this.modPwdForm.oldPassword === '' ||
        this.modPwdForm.confirmPassword === '' ||
        this.modPwdForm.newPassword !== this.modPwdForm.confirmPassword
      ) {
        return
      }
      //提交修改密码请求
      this.positiveButtonDisabled = true
      const res: Response<any> = await modPwdReq({ ...this.modPwdForm }).catch(
        () => {
          this.positiveButtonDisabled = false
        }
      )
      if (res.resp_code === 0) {
        this.initData()
        this.$emit('modalShowChange', false)
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.initData()
      this.$emit('modalShowChange', false)
    },
    initData() {
      this.modPwdForm.oldPassword = ''
      this.modPwdForm.newPassword = ''
      this.modPwdForm.confirmPassword = ''
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('user.modPwdTitle')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled:
            this.positiveButtonDisabled ||
            !(
              this.modPwdForm.newPassword !== '' &&
              this.modPwdForm.oldPassword !== '' &&
              this.modPwdForm.confirmPassword !== '' &&
              this.modPwdForm.newPassword === this.modPwdForm.confirmPassword
            )
        }}
        onClose={this.onNegativeClick}
      >
        <NForm rules={this.rules}>
          <NFormItem path='oldPassword'>
            <NInput
              type='password'
              size='large'
              v-model={[this.modPwdForm.oldPassword, 'value']}
              placeholder={window.$t('user.oldPassword')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='newPassword'>
            <NInput
              type='password'
              size='large'
              v-model={[this.modPwdForm.newPassword, 'value']}
              placeholder={window.$t('user.newPassword')}
            />
          </NFormItem>
          <NFormItem path='confirmPassword'>
            <NInput
              type='password'
              size='large'
              v-model={[this.modPwdForm.confirmPassword, 'value']}
              placeholder={window.$t('user.confirmPassword')}
            />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default ModPwdModal
